<script lang="ts" setup>
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { ref } from 'vue';
  import { getRolePermissions } from '@/api-new2/system/role';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { Modal } from '@arco-design/web-vue';
  import EditModal from './edit-modal.vue';
  import RoleDetail from './role-detail.vue';

  const currentInstId = ref('');

  const onInstClick = (item: any) => {
    currentInstId.value = item.instId;
  };

  const listView = useSkeleton({
    apiFun: getRolePermissions,
    onSuccess(data) {
      if (data && data.length > 0) {
        onInstClick(data[0]);
      }
    },
  });

  const handler = useModeModalHandler({
    onSuccess() {
      listView.retry();
    },
  });

  const handleDisableInst = (item: any) => {
    Modal.warning({
      title: '确定停用此机构吗',
      content: '停用后机构下人员将不可再登录本系统',
      hideCancel: false,
      onBeforeOk(done) {
        // disableInstitution(item.instId).then(() => {
        //   done(true);
        //   Message.success('操作成功！');
        //   listView.retry();
        // });
      },
    });
  };
</script>

<template>
  <div class="flex w-full gap-5">
    <div class="flex flex-col w-[25%]">
      <a-card title="权限管理">
        <template #extra>
          <a-link @click="handler.showAdd()">新增权限组</a-link>
        </template>

        <skeleton-view v-slot="{ data }" v-bind="listView.bindProps">
          <ul class="flex flex-col gap-5 h-[600px] overflow-y-auto">
            <li
              v-for="item in data"
              :key="item.instId"
              class="flex gap-2 content-center items-center py-[10px] px-[20px]"
              :class="[
                item.instId === currentInstId ? 'bg-sky-50 text-black' : '',
              ]"
              @click="onInstClick(item)"
            >
              <span class="flex-1">{{ item.name }}</span>
              <a-tag v-if="item.status === 2">已停用</a-tag>

              <a-popover v-else class="ml-auto" position="bottom">
                <icon-more-vertical />
                <template #content>
                  <div class="flex flex-col">
                    <a-button
                      size="small"
                      type="text"
                      @click="handler.showEdit(item)"
                      >编辑
                    </a-button>
                    <a-button
                      size="small"
                      type="text"
                      status="danger"
                      @click="handleDisableInst(item)"
                    >
                      停用
                    </a-button>
                  </div>
                </template>
              </a-popover>
            </li>
          </ul>
        </skeleton-view>
      </a-card>
    </div>
    <div class="flex-1">
      <a-card>
        <RoleDetail :inst-id="currentInstId" />
      </a-card>
    </div>

    <EditModal v-bind="handler.bindProps" />
  </div>
</template>

<style lang="less">
  .current-inst {
    background-color: cornflowerblue;
  }
</style>
